import {createClassWrap} from './class.js'

let month = [],
    date = [],
    nowmonth = new Date().getMonth(),
    params = {
        studentid : JSON.parse(localStorage.getItem('user')).user_id,
        level : '',//级别
        weeklycurriculum : '',//每周几节课
        attendclass : '',//星期几方便上课
        jsk : '',//几点方便上课
        cuyear : new Date().getFullYear(),//年份
        cumonth : new Date().getMonth() + 1,//月份
        cuday : new Date().getDate(),//日期
        createtime : new Date().getFullYear() + '-' 
        + ((new Date().getMonth() + 1) < 10 ? '0' + new Date().getMonth() + 1 : new Date().getMonth() + 1 + '-') 
        + ((new Date().getDate() + 1) < 10 ? '0' + new Date().getDate() : new Date().getDate() + '') + ' ' 
        + ((new Date().getHours()) < 10 ? '0' + new Date().getHours() : new Date().getHours() + ':')
        + ((new Date().getMinutes()) < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes() + ':')
        + ((new Date().getSeconds()) < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()) ,//创建时间
        state : ''//状态
    },
    year = new Date().getFullYear(),
    grade = ''

for(let i=nowmonth;i<12;i++){
    let d = new Date()
    d.setMonth(i)
    d.setDate(0)
    month.push(i+1)
    date.push(d.getDate())
}

export function createMonth(){
    for(let j=0;j<month.length;j++){
        let option1 = document.createElement('option')
        option1.value = month[j] + '月'
        option1.innerHTML = month[j] + '月'
        $('.bg12')[0].appendChild(option1)   
    }

    $('.bg12')[0].addEventListener('change',(e) => {
        createDate()
    })
}



export function createDate(){
    let monthIndex = month.indexOf(parseInt($('.bg12')[0].value))
    let nowdate = date[monthIndex]
    $('.bg12')[1].innerHTML = ''
    for(let i=1;i<nowdate+1;i++){
        let option1 = document.createElement('option')
        option1.value = i + '日'
        option1.innerHTML = i + '日'
        $('.bg12')[1].appendChild(option1)  
    }
}

export async function getStudentSetTarget(){
    let res = await ajax('stduent_query_week_target',{},'post')
    Object.assign(params,res.data)
    params.cuyear = new Date().getFullYear()
    params.cumonth = new Date().getMonth() + 1
    params.cuday = new Date().getDate()
}

export function initEditVal(){
    let option = document.createElement('option')
    option.value = 'HSK' + params.grade + '级'
    grade = params.grade
    option.innerHTML = 'HSK' + params.grade + '级'
    $('.bg3')[0].appendChild(option)
    $('.bg3')[0].value = 'HSK' + params.grade + '级'

    $('.bg6').each(function(index){
        if(this.innerText == params.level){
            this.className = 'bg6 bg-click'
        }else{
            this.className = 'bg6'
        }
    })
    $('.bg9').each(function(index){
        if(this.innerText == params.weeklycurriculum){
            this.className = 'bg9 bg-click'
        }else{
            this.className = 'bg9'
        }
    })
    $('.bg15').each(function(index){
        if(index == (params.attendclass - 1)){
            this.className = 'bg15 bg-click'
        }else{
            this.className = 'bg15'
        }
    })
    $('.bg17')[0].value = params.jsk
}

export function Listener(){
    $('.bg6').each(function(index){
        $(this).on('click',function(e){
            Array.from($(e.target).parent().children()).forEach(item => {
                if(item.dataset.index === e.target.dataset.index){
                    item.className = ' bg6 bg-click'
                }else{
                    item.className = 'bg6'
                }
            })
            params.level = e.target.innerText
        })
    })

    $('.bg9').each(function(index){
        $(this).on('click',function(e){
            Array.from($(e.target).parent().children()).forEach(item => {
                if(item.dataset.index === e.target.dataset.index){
                    item.className = ' bg9 bg-click'
                }else{
                    item.className = 'bg9'
                }
            })
            params.weeklycurriculum = parseInt(e.target.innerText)
        })
    })

    $('.bg15').each(function(index){
        $(this).on('click',function(e){
            Array.from($(e.target).parent().children()).forEach(item => {
                if(item.dataset.index === e.target.dataset.index){
                    item.className = ' bg15 bg-click'
                }else{
                    item.className = 'bg15'
                }
            })
            params.attendclass = parseInt(e.target.dataset.index) + 1 + ''
        })
    })

    $('.bg17')[0].addEventListener('change',(e) => {
        params.jsk = $(e.target).val() + ''
        console.log($(e.target).val())
    })

    download()
}

export function createEdit() {
    let div = `
    <div
        class="bgwrap animated fadeInUp">
        <div class="bg1">
            <div class="bg2">你现在的级别</div>
            <select name="" id="" class="bg3" >
              
            </select>
            <div class="bg4" >你想达到的级别</div>
            <div class="bg5" >
                <div class="bg6" data-index='0' >HSK3级</div>
                <div class="bg6" data-index='1' >HSK4级</div>
                <div class="bg6" data-index='2' >HSK5级</div>
            </div>
            <div class="bg7">每周上几节课（每节50分）</div>
            <div class="bg8">
                <div class="bg9" data-index='0'>1</div>
                <div class="bg9" data-index='1' style="margin-left: 15px;">2</div>
                <div class="bg9" data-index='2' style="margin-left: 15px;">3</div>
                <div class="bg9" data-index='3' style="margin-left: 15px;">4</div>
                <div class="bg9" data-index='4' style="margin-left: 15px;">5</div>
            </div>
            <div class="bg10">什么时候达到你的目标</div>
            <div class="bg11">
                <select name="" id="" class="bg12">
   
                </select>
                <select name="" id="" class="bg12" style="margin-left: 30px;">
                   
                </select>
            </div>
            <div class="bg13">星期几方便上课</div>
            <div class="bg18">
                <div class="bg15" data-index='0'>星期一</div>
                <div class="bg15" data-index='1' style="margin-left: 10px;">星期二</div>
                <div class="bg15" data-index='2' style="margin-left: 10px;">星期三</div>
                <div class="bg15" data-index='3' style="margin-left: 10px;">星期四</div>
                <div class="bg15" data-index='4' style="margin-left: 10px;">星期五</div>
            </div>
            <div class="bg16">几点方便</div>
            <select name="" id="" class="bg17">
                <option value="00:00:00">00:00:00</option>
                <option value="01:00:00">01:00:00</option>
                <option value="02:00:00">02:00:00</option>
                <option value="03:00:00">03:00:00</option>
                <option value="04:00:00">04:00:00</option>
                <option value="05:00:00">05:00:00</option>
                <option value="06:00:00">06:00:00</option>
                <option value="07:00:00">07:00:00</option>
                <option value="08:00:00">08:00:00</option>
                <option value="09:00:00">09:00:00</option>
                <option value="10:00:00">10:00:00</option>
                <option value="11:00:00">11:00:00</option>
                <option value="12:00:00">12:00:00</option>
                <option value="13:00:00">13:00:00</option>
                <option value="14:00:00">14:00:00</option>
                <option value="15:00:00">15:00:00</option>
                <option value="16:00:00">16:00:00</option>
                <option value="17:00:00">17:00:00</option>
                <option value="18:00:00">18:00:00</option>
                <option value="19:00:00">19:00:00</option>
                <option value="20:00:00">20:00:00</option>
                <option value="21:00:00">21:00:00</option>
                <option value="22:00:00">22:00:00</option>
                <option value="23:00:00">23:00:00</option>
                <option value="24:00:00">24:00:00</option>
            </select>
            <div class="bg19">
                <div class="bg20">
                    <div class="bg21">
                        <div><i class='iconfont icon-zhouqiguanli' style='color:#5686E9'></i></div>
                        <div>所需周数</div>
                    </div>
                    <div class="bg22">
                        <div></div>
                        <div>120周</div>
                    </div>
                </div>
                <div class="bg20">
                    <div class="bg21">
                        <div><i class='iconfont icon-31shijian' style='color:#5686E9'></i></div>
                        <div>所需课数</div>
                    </div>
                    <div class="bg22">
                        <div></div>
                        <div>120课时</div>
                    </div>
                </div>
                <div class="bg20">
                    <div class="bg21">
                        <div><i class='iconfont icon-xuexishuben1' style='color:#5686E9'></i></div>
                        <div>所需自习时间</div>
                    </div>
                    <div class="bg22">
                        <div></div>
                        <div>120小时</div>
                    </div>
                </div>
            </div>
            <div class="bg23">保存</div>
        </div>
        <div class="bg24">
            <div class="bg25">
                <div class="bg26">
                    <div style="margin-top: 27px;">根据HSK官网，HSK（四级）考查考生的汉语应用能 力，它对应于《国际汉语能力标准》四级、《欧洲语言 共同参考框架（CEF）》B2级。通过HSK（四级）的考 生可以用汉语就较广泛领域的话题进行谈论，比较流利 地与汉语为母语者进行交流。</div>
                    <div style="margin-top: 25px;">结业证书</div>
                    <img class='certificate' style="margin:17px auto" width="191" height="141" src="/static/certificate.jpg" alt="certificate">
                    <div class="bg27">下载</div>
                </div>
            </div>
        </div>
    </div>
    `
    return div
}


export function saveButtonListener(){
    $('.bg23')[0].addEventListener('click',async ()=>{
        // params.cumonth = $('.bg12')[0].value
        // params.cuday = $('.bg12')[1].value
        if(params.level === ''){
            Dreamer.error('请填写你想达到的级别')
            return
        }
        if(params.weeklycurriculum === ''){
            Dreamer.error('请填写每周上几节课')
            return
        }
        if(params.attendclass === ''){
            Dreamer.error('请填写星期几方便上课')
            return
        }
        if(params.jsk === ''){
            Dreamer.error('请填写几点方便上课')
            return
        }
        console.log('params',params)
        let res = await ajax('student_target_update',params,'post')
        if(res.code == 200){
            Dreamer.success('修改成功',2000)
        }
        $('.class-wrap')[0] && $('.class-wrap')[0].remove()
        createClassWrap()
    })
}


export function download(){
    $('.bg27')[0].addEventListener('click',() => {
        let canvas = $('#myCanVas')[0]
        let ctx = canvas.getContext('2d')
        ctx.beginPath()
        ctx.font = "14px Arial";
        ctx.fillStyle = "#151515";
        ctx.drawImage($('.certificate')[0],0,0)//背景图
        ctx.fillText(`${JSON.parse(localStorage.getItem('user')).user_name}`,110,190)
        ctx.closePath() // 结束
        ctx.beginPath() // 开始
        ctx.font = "14px Arial bold";
        ctx.fillStyle = "#151515";
        ctx.fillText(`${year}`,183,227)
        ctx.fillText(`${grade}`,83,262)
        const imageSource = canvas.toDataURL("image/png");
        var oA = document.createElement('a')
        oA.download = '图片下载'; // 设置下载的文件名，默认是'下载'
        oA.href = imageSource;
        document.body.appendChild(oA);
        oA.click();
        oA.remove();
    })
}